<html>
    <head>
        <title>JSX</title>
    </head>
    <body>
        <script>
            // JSX
                    /*
                        如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：
                    */
                            createElement('anchored-heading',{
                                props:{
                                    level:1
                                }
                            },[
                                createElement('span','Hello'),
                                'world'
                            ])

                    // 特别是对应的模板如此简单的情况下：
                            /*
                                <anchored-heading :level="1">
                                    <span>Hello </span> World!
                                </anchored-heading>
                            */

                    /*
                        这就是为什么会有 "Babel插件"( Babel： 中文含义为：指多种语言的嘈杂声)
                    
                        用于在Vue中使用JSX语法，它可以让我们回到接近于模板的语法上！
                    */ 
                                import AnchoredHeading from './AnchoredHeading.vue'

                                new Vue({
                                    el:'#demo',
                                    render:function(h){   // 将 h 作为 createElement 的别名是Vue生态系统中的一个惯例，
                                        <AnchoredHeading level={1}>
                                            <span>Hello </span> world !
                                        </AnchoredHeading>
                                    }
                                });
                                
                        /*
                            将 h 作为 createElement 的别名是Vue生态系统中的一个通惯例，实际上也是 JSX 所要求的。 
                            从Vue 的 Babel 插件的3.4.0 版本开始，我们会在以 ES2015 语法声明的含有JSX的任何方法和 getter 中(不是函数或箭头函数中)自动注入。

                            const h = this.$createElement ,这样你就可以去掉(h) 参数了。
                            对于更早版本的插件，如果 h 在当前作用域中不可用，应用汇抛出错误。
                        */

                        // 要了解更多关于 JSX 如何映射到JavaScript ,请阅读使用文档。
                                
                    


        </script>
    </body>
</html>